import React, { useRef } from 'react'
import {nanoid} from 'nanoid'
import './index.css'

export default function Header({addItem}) {

	//  通过useRef获取输入框的引用
	const nameRef = useRef('')

	// 添加按钮点击事件， 调用App组件传来的addItem方法，增加列表项
	// 非受控组件必须通过ref 或  事件回调获取输入框的值
	function add() {
		addItem({
			id: nanoid(),
			name: nameRef.current.value,
			done: false
		})
		nameRef.current.value = ''
	}

	return (
		<div className='header'>
			<div>
				<input ref={nameRef} type="text" />
				<button onClick={add} >添加</button>
			</div>
		</div>
	)
}
